<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="./../template/StakeholderTemplate.xhtml">

    <ui:define name="contentInsert">

        <h3>Add Outlet</h3>
        <h:form>
            <p:panel id="panel" >
                <p:ajaxStatus style="width:16px;height:16px;">
                    <f:facet name="start">
                        <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                    </f:facet>
                    <f:facet name="complete">
                        <h:outputText value="" />
                    </f:facet>
                </p:ajaxStatus>
                <p:messages />
                <h:panelGrid columns="3">


                    <!--WALAU CM Team why your outlet need so many bleddy data fields.....-->

                    <h:outputLabel for="outletName" value="Outlet Name:"/>
                    <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                 id="outletName" value="#{createOutletMB.outletName}"/>
                    <p:message for="outletName"/>

                    <h:outputLabel for="buildingName" value="Building Name:"/>
                    <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                 id="buildingName" value="#{createOutletMB.buildingName}"/>
                    <p:message for="buildingName"/>

                    <h:outputLabel for="blkNo" value="Block Number:"/>
                    <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                 id="blkNo" value="#{createOutletMB.blkNo}"/>
                    <p:message for="blkNo"/>

                    <h:outputLabel for="streetName" value="Street Name:"/>
                    <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                 id="streetName" value="#{createOutletMB.streetName}"/>
                    <p:message for="streetName"/>

                    <h:outputLabel for="unitName" value="Unit Name:"/>
                    <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                 id="unitName" value="#{createOutletMB.unitName}"/>
                    <p:message for="unitName"/>

                    <h:outputLabel for="postalCode" value="Postal Code:"/>
                    <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                 id="postalCode" value="#{createOutletMB.postalCode}"/>
                    <p:message for="postalCode"/>

                    <h:outputLabel for="phoneNo" value="Contact Number:"/>
                    <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                 id="phoneNo" value="#{createOutletMB.phoneNo}"/>
                    <p:message for="phoneNo"/>

                    <h:outputLabel for="websiteURL" value="Website URL:"/>
                    <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                 id="websiteURL" value="#{createOutletMB.websiteURL}"/>
                    <p:message for="websiteURL"/>

                    <h:outputLabel for="email" value="Email Address:"/>
                    <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                 id="email" value="#{createOutletMB.email}"/>
                    <p:message for="email"/>

                    <h:outputLabel for="priceRange" value="Price Range:"/>
                    <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                 id="priceRange" value="#{createOutletMB.priceRange}"/>
                    <p:message for="priceRange"/>

                    <h:outputLabel for="image" value="Outlet Picture URL:"/>
                    <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                 id="image" value="#{createOutletMB.image}"/>
                    <p:message for="image"/>           

                    <h:outputLabel for="operatingHrs" value="Opening Hours:"/>
                    <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                 id="operatingHrs" value="#{createOutletMB.operatingHrs}"/>
                    <p:message for="operatingHrs"/>


                </h:panelGrid>
                <br/>
                <br/>
                Drag the marker on the map to the spot indicating where your outlet is located:

                <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;region=SG" type="text/javascript">             
                </script>

                <p:gmap id ="map" center="1.360803,103.817368" zoom="13" type="HYBRID"   
                        style="width:600px;height:400px"  
                        model="#{mapBean.draggableModel}"  
                        markerDragListener="#{createOutletMB.getLatLong}"
                        onMarkerDragUpdate="coordinates" />  <br/>


                <p:panel id="coordinates">        
                    <h:panelGrid columns="2">
                        <h5>Latitude: </h5> <h:outputLabel value="#{createOutletMB.latitude}"/>
                        <h5>Longitude: </h5> <h:outputLabel value="#{createOutletMB.longitude}"/>
                    </h:panelGrid>
                </p:panel>


                <br/>
                <br/>
                <h:commandButton id="createNewOutlet" value="Create Outlet" onclick="if (!confirm('Are you sure you want to create new outlet?')) return false"
                                 actionListener="#{createOutletMB.makeNewOutlet}" />

            </p:panel>
        </h:form>

    </ui:define>

</ui:composition>

